<template>
    <div>
        <mt-swipe :auto="4000" class="lunbotu" :show-indicators="false">
            <mt-swipe-item v-for="item in list.images" :key="item.id">
                <img :src="item" alt="">
            </mt-swipe-item>
        </mt-swipe>

			<div class="mui-card">
				<div class="mui-card-header">商家信息</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="left">
                            <span class="name">{{list.name}}</span>
                            <span class="address">{{list.address}}</span>
                            <span class="mui-icon mui-icon-location place"><span>离我最近</span></span>
                        </div>
                        <div class="right">
                            <div> <span class="mui-icon mui-icon-phone"></span></div>
                        </div>
					</div>
				</div>
				<div class="mui-card-footer">电话:{{list.phone}}</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner time">
						<span>营业时间:{{list.businessHours}}</span>
						<span>温馨提示:{{list.supportService}}</span>
					</div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-header">评价
                    <div class="grade">
                        <div class="grade-old">★★★★★</div>
                        <div class="grade-new" :style="{width:list.score+'%'}">★★★★★</div>
                    </div>
                </div>
				<div class="mui-card-content"  v-for="item in list.comments" :key="item.id">
					<div class="mui-card-content-inner comment">
                        <div class="head"><img src="/src/images/avatar.png" alt=""></div>
						<div class="comment-username">
                            <span class="username">{{item.name}}</span>
                            <span class="userdate">{{item.date}}</span> 
                            <div class="grade">
                                <div class="grade-old">★★★★★</div>
                                <div class="grade-new" :style="{width:item.rating+'%'}">★★★★★</div>                                  
                            </div>
						                       
                        </div>
                        <div class="comment-contern">
                             <span class="contern">{{item.content}}</span>
                        </div>
					</div>
				</div>
				<div class="mui-card-footer">{{list.name}}</div>
			</div>
    </div>
</template>
<script>
import mui from '../../lib/mui/js/mui.min.js'
import { Toast } from 'mint-ui'
export default {
    data(){
        return {
            shopId:'', //每个页面得到ID 一共九个页面，所以shopId不可能超过9
             page: 1, //每家店的ID,默认是1
            limit: 1, //要加多少家店的数据，默认只加载一家  
            list : []          //要渲染的页面数据
        }
    },
    created(){
        this.shopId = this.$route.params.shopId
        this.page = this.$route.params.id
        // console.log(this.$route.params.shopId)
        // console.log(this.$route.params.id)
        this.getDetalis()
       
    },
    mounted(){
 
    },
    methods:{
         getDetalis(){
             this.$http.get('https://locally.uieee.com/categories/'+this.shopId +'/shops?_page='+this.page+'&_limit='+this.limit+'')
             .then(resule =>{
                 this.list = resule.data[0]
                // console.log(resule.data)
             })
         },
    },
    watch:{
 
    }
}
</script>
<style lang="scss" scoped>
//  .mui-card{
//      touch-action: none;
//  }
.lunbotu{
    height: 200px;
    .mint-swipe-item{
        img{
            width: 100%;
            height: 100%;
        }
         
    }
}
.mui-card-content-inner{
    display: flex;
    justify-content: space-between;
    .left{
        display: flex;
        flex-direction: column;
        line-height: 2;
        border-right: 1px solid #ccc;
        width: 75%;
        .name{
            font-weight: 700;
            font-size: 16px;
        }
        .address{
            font-size: 14px;
            color: #667EB5;
        }
        .place{
            color: #777777;
            font-size: 17px;
            span{
                padding-left: 10px;
                color: #F09606;
                font-size: 15px;
            }
        }
      
    }
    .right{
        display: flex;
        width: 20%;
        justify-content: center;
        align-items: center;
        color: #06C1AE;
    }
}
 .time{
     display: flex;
     flex-direction: column;
     font-size: 12px;
     color: #777777;
 }
.grade{
   font-size: 20px;
  
   position: absolute;
   right: 5px;
   top: 10px;;
.grade-old{
       color: #E3E3E3;
    }
.grade-new{
           color: #CB750E;
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           overflow: hidden;
    }
}
.comment{
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    .head{
        width: 50px;
        height: 50px;
        position: absolute;
        overflow: hidden;
        left: 15px;
        top: 5px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .comment-username{
        display: flex;
        flex-direction: column;
        margin-left: 70px;
        .username{
            font-size: 14px;
        }
        .userdate{
            font-size: 12px;
            color: #777777;
        }
    }
    .comment-contern{
        margin-top: 10px;
        font-size: 16px;
        padding-left: 8px;
    }
}
</style>

